<template>
    <div class="Home">
        <home-header></home-header>
        <home-nav></home-nav>
        <home-swiper></home-swiper>
        <home-icons :isHotTip="isHotTip"></home-icons>
        <home-banner></home-banner>
        <home-list></home-list>
        <div class="back-center">
            <div class="back-to-top">返回顶部</div>
        </div>
        <home-icons></home-icons>
        <div class="footer-contact-wp">
            <span class="footer-btn tel">
                <a href="tel:400-755-3333">400-788-3333</a>
            </span>
            <a class="onlive-btn-new footer-btn" href="">在线客服</a>
        </div>
        <div class="footer-nav clearfix">
            <p class="footer-copy">
                <span>粤ICP备13003602号-2</span>
                <span>合字B2-20170010</span>
                <span>营业执照</span>
                ©2018&nbsp;Meizu&nbsp;
                <span>All rights reserved</span>
            </p>
            <div class="footer-item lang-choose-container">
                <div class="lang-choose-wrapper"></div>
            </div>
        </div>
    </div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeNav from './components/Nav'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeBanner from './components/Banner'
import HomeList from './components/List'
export default {
    name: 'Home',
    components: {
        HomeHeader,
        HomeNav,
        HomeSwiper,
        HomeIcons,
        HomeBanner,
        HomeList
    },
    data() {
        return {
            isHotTip: true
        }
    }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .Home
        background: $conBgColor
        .back-center
            display: flex
            justify-content: center
            align-items: center
            height: 1.28rem
            font-size: 1.5rem
            margin-top: -.224rem
            .back-to-top
                display: inline-block
                color: #999
                font-size: .3rem
                padding-right: .44rem
                // background-image: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAA0CAMAAAA9iN8aAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAIxUExURQAAAP///7+/v6qqqqurq6qqqqurq6qqqqurq////7m5uaqqqqqqqqqqqqurq6qqqqurq7S0tK2trb+/v6qqqqqqqqqqqrOzs6qqqqqqqqqqqqqqqqqqqq2traqqqqqqqqurq6urq6qqqszMzKqqqqurq6urq6qqqqurq66urqurq7a2tqurq6ysrKqqqrCwsKurq6urq6ysrKysrKqqqqurq6qqqqurq6urq6qqqqysrKqqqq2tra+vr6qqqqqqqqqqqqurq6urq6qqqqqqqqqqqqqqqqurq6qqqqqqqqysrKqqqqysrKurq6qqqqqqqqqqqqurq6qqqrGxsaqqqrGxsaysrKqqqqurq6urq6qqqqqqqqqqqqurq6qqqqysrK+vr6ysrKqqqqurq6urq62traurq6qqqqurq6urq7a2tqurq6urq6urq6ysrKqqqqqqqqqqqqurq6urq6qqqqqqqqurq6qqqqqqqqurq6urq6urq6qqqqqqqqqqqq6urqurq6urq62traurq6ysrK2traqqqqqqqqurq6urq6qqqqysrKqqqq2traqqqqurq6urq6qqqqurq6qqqq2trbOzs6ysrKqqqqysrKqqqqqqqqqqqqqqqqurq6urq6ysrKurq6qqqqurq6urq6urq6urq6qqqqqqqqurq6qqqqqqqqurq6qqqq6urqqqqqurq7Gxsa6urq2traysrKysrKqqqqqqqqurq6urq6qqqqqqqjye12QAAAC6dFJOUwACBNj+8Yj5+wEL9+798ur1ERkIwQbcFOfSxro5IkgP40/8BeJM6c13LOwOVVxFHeZeNDHr3ZN/QANlFTgjwwk/ubMtJx5vgBLzTegooFSB9FLeGu0XU6yjSVei4anlcRAuIciJPtTJqm0HmMVnNxjfdbawz4fO+kuClKS7uCQWkZof72tEnEKb0dkrsTXMc8K0p5kyClCrR/bkUQy/j2JGM2SXW9rTTvilYDo2JniLDSkcaF+1x5KtvYmtgNwAAAKNSURBVFjDrZjnQxNBEMWPkmgQYwFJKAZFQUWxoSCWYENBmnSw967YOyjYu2AXe8ECKnbdv85LNJi8u73budv5lpk3v+Tudt/ORVEEoys1y5Hod5fuz1Tkxo5y1h87x8gkFxxgYdEZJY/sKmcR8VIe+gmDOCSLnM80cUMO+SzTiacyyK9i9dAZVfbJmQOZbgw4Z5e8+QHjRMkee+RcB+NG7RU75A9DmEGs2WCdPGUVM4ykZqtkTwygTvohcWmdNXLfdQBtfZR+EFK77lghJzwGzJZiRal7DckWCzYYfRUge2sC6faHkF5NtkHXSkCUtv4tfM6Gwi0q+jQAzqwPVa6VQMlJIy+F9qE9/2sX3kJxH4W8HZqP+MKrdzOg/EKcnANmN3hFZP091itEycvQ7HajYi3a4GQx8vxB0PhRqzkGkuVzRcjP0ew+6amOgyh+gjl5MZrdef11/w5kU0eakYvGQktDAWe3doBw5nBj8hw0u9QRPGnhTZAmDzMiTxwH8o1xfHH6YRCnGIgTEkHcXWz0Q05dBvkC7iVGLwRptcntKxoFDfc4Nug6AULvPLOHXjYDWi7q6/JwqS4yX6rT3dC0SU9ViWaXJrLBZuHWHa/VLEFbeCZmC2/QcGajYhqa2SRRMzPrHG363fzQXO996h0jHElpBs+ZeNzx15ZmdbZRj/9Gzo74gntqG3m00O7jumD+u7ATENynIZCtJ/gXwTOb1OQviuuKO32jmksinRUGw3jk+ZSspty0E070VPWqmR/Ec5kft8Nngd9q4id1mhCbYAK7rsZBnYFE5q5aT+Dz1xC53v4LbE6I/e2f7QWn8ZhcGa/dvcEFl9XU/6pV4cz3Fcr5syDuaKWzKrg3/gCKGgEnMe5LJwAAAABJRU5ErkJggg==)
                background-position: right center
                background-size: .3rem
                background-repeat: no-repeat
        .footer-contact-wp
            display: flex
            padding: 0 .22rem
            padding-top: .45rem
            margin-top: -.2rem
            background: $topBgColor
            .footer-btn
                height: .62rem
                line-height: .62rem
                font-size: .3rem
                text-align: left
                border-radius: .36rem
                margin: 0 .15rem
                flex: 1
                overflow: hidden
                &.tel
                    background: #00B4FF url(//m2.res.meizu.com/static/cn/_partial/footer/images/icon-tel_f3f4a41.png) no-repeat
                    background-size: .32rem
                    background-position: .26rem center
                    color: #fff
                    text-indent: .78rem
                    a
                        color: #fff
                        text-indent: .78rem
                        display: block
                &.onlive-btn-new
                    background: #00B4FF url(//m2.res.meizu.com/static/cn/_partial/footer/images/icon-chat-white_b7d5704.png) no-repeat
                    background-size: .36rem
                    background-position: .63rem center
                    border: 1px solid #00B4FF
                    color: #fff
                    text-indent: 1.2rem
        .clearfix
            display: block;
            &.footer-nav
                font-size: 1.1rem
                text-align: left
                width: 100%
                padding: 5vw 4vw 0 5vw
                box-sizing: border-box
                margin-bottom: .5rem
                background: $topBgColor
                .footer-copy
                    font-size: 3.2vw
                    line-height: 1.6
                    color: #999
                    text-align: left
                    padding: 0
                    display: inline-block
                    width: 68%
                    span
                        color: #999
</style>

